<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>甲醛测量</title>
    <link rel="stylesheet" href="mini-nord.css.gz">

</head>
<body>
<div class="container">
    <h3>甲醛读值</h3>
    <div class="row">
        <div class="col-sm-12" id="id_value"></div>
    </div>
    <h3>原始值</h3>
    <div class="row">
        <div class="col-sm-12" id="id_raw"></div>
    </div>
    <h3>时间</h3>
    <div class="row">
        <div class="col-sm-12" id="id_time"></div>
    </div>
    <h3>温度</h3>
    <div class="row">
        <div class="col-sm-12" id="id_temp"></div>
    </div>
    <h3>湿度</h3>
    <div class="row">
        <div class="col-sm-12" id="id_humidity"></div>
    </div>
</div>
</body>
</html>
<script src="zepto.js.gz"></script>
<script>
    let ws;
    let uri = "ws://" + location.host + "/chat";
    $(document).ready(function () {
        function ws_connect() {
            ws = new WebSocket(uri);
            ws.onopen = function (e) {
                console.log(e);
            };
            ws.onclose = function (e) {
                console.log(e);
                setTimeout(ws_connect, 1000);
            };
            ws.onmessage = function (e) {
                console.log(e.data);
                let obj = JSON.parse(e.data);
                if(obj.value !== "undefined")
                    $("#id_value").html("<p>" + obj.value + "</p>");
                if(obj.raw !== "undefined")
                    $("#id_raw").html("<p>" + obj.raw + "</p>");
                $("#id_time").html("<p>" + obj.time + "</p>");
                if(obj.temp !== "undefined")
                    $("#id_temp").html("<p>" + obj.temp + "</p>");
                if(obj.humidity !== "undefined")
                    $("#id_humidity").html("<p>" + obj.humidity + "</p>");

            };
            ws.onerror = function (e) {
                console.log(e);
                ws.close();
            };
        }
        ws_connect();

    });
</script>
